<template>
  <button class="btn-back" id="back" @click="back()">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-home"></use>
    </svg>
  </button>
  <label class="btn-info" for="back">返回首页</label>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
import "../../assets/iconfont/iconfont";
export default class BackButoon extends Vue {
  back() {
    this.$router.push({ path: "/" });
  }
}
</script>

<style scoped>
.btn-back {
  position: fixed;
  right: 100px;
  bottom: 100px;
  z-index: 10000;
  height: 0.5rem;
  font-size: 0.3rem;
  border-radius: 50%;
}
.btn-info {
  color: whitesmoke;
  font-size: 0.2rem;
  position: fixed;
  right: 90px;
  bottom: 75px;
}
.icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
